@media screen and (max-width: 750px) {
  .main {
    padding-top: 67.16px !important;
  }


}

.index {
  max-width: 100vw;
  position: relative;
  font-size: 15px;

  .main {
    width: 100%;
    flex: 1;
    z-index: 1;
    //margin-top: -60px;
    //background-color: #f0f2f5a8;
    //background-image: linear-gradient(172deg, #e3ecff, #fff 86%, #fff 14%);
    padding-top: 100px;

    @media screen and (max-width: 750px) {
      .section {
        padding: 0 14px !important;
      }

      .arrow {
        display: none !important;
      }



      .carousel-container {
        padding: 0 !important;
      }

      .main-section-pc {
        display: none;
      }

      .main-section-mobile {
        display: flex !important;
        flex-direction: column;
        align-items: center;
      }

      .section-function {
        flex-direction: column;

        .section-item {
          flex: 0;
          max-width: 100%;
          margin: 7px 0;
          height: 263px;
          width: 347px;

          img {
            width: 108px;
            height: 108px;
            flex-shrink: 0;
            margin: 0;
            //margin:36px 0 0 20px;
          }

          .title {
            padding: 0 0 12px 14px;
            color: #1e2025;
            font-family: "PingFang SC";
            font-size: 16px;
            font-weight: 500;
          }

          .desc {
            padding: 0 14px;
          }

          .right-operator {
            display: flex;
            justify-content: flex-start;
            padding: 24px 14px;

            img {
              width: 20px;
              height: 20px;
            }
          }
        }
      }

      .partners_item_container {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 !important;
        margin-top: 16px !important;

        .partners_item {
          flex: none !important;
          margin: 0 !important;

          .pc {
            display: none !important;
          }

          .mobile {
            display: block !important;
          }
        }

        .medium {
          width: 166px !important;
          height: 48px !important;
        }

        .small {
          margin-top: 15px !important;
          width: 106px !important;
          height: 48px !important;
        }
      }

      .arrow {
        display: none;
      }


      .solution_container {
        padding-top: 16px;

        .item_container {
          border-radius: 12px;
          border: 0.5px solid #6499ff;
          background: #fff;
          box-shadow: 10px 6px 40px 0px rgba(45, 117, 255, 0.04);


          .item_content {
            flex-direction: column;
            align-items: center;
            margin-top: 0 !important;

            .left {
              flex: none !important;
              width: 347px;
              height: 168px;
              border: none !important;
              //margin: 0 auto;
              border-radius: 12px !important;
            }

            .right {
              padding: 0 14px;

              .title {
                padding: 24px 0 0 0 !important;
              }

              .desc {
                width: 100% !important;

                padding: 12px 0 0 0 !important;
              }

              .cooperation {
                padding: 24px 0 24px 0 !important;
              }
            }
          }
        }
      }

      .mobile-group {
        display: block !important;

        .top {
          display: flex;

          .user-name-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2px 0 4px 8px;

            .user-name {
              display: flex;
              align-items: center;

              span {
                padding-right: 9px;
              }
            }

            .user-desc-omit {
              //width: calc(100% - 600px);
              max-width: 80vw;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .user-item {
          margin: 24px 0;
        }

        .active {
          .user-name {
            img {
              transform: rotate(180deg);
            }
          }

          ul {
            display: block;
          }
        }

        ul {
          display: none;
          padding: 12px 14px 12px 4px;

          li {
            padding-top: 16px;

            &:first-child {
              padding-top: 0;
            }

            .title {
              span {
                padding-left: 6px;
                color: #7b7b7b;
                font-family: "Source Han Sans CN";
                font-size: 14px;
              }
            }

            .desc {
              padding-left: 18px;
              padding-top: 6px;
              line-height: 1.5em;
            }
          }
        }

        .user-icon-container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50px;
          height: 50px;
          flex-shrink: 0;
          border-radius: 50%;
          overflow: hidden;
          border: 0.5px solid var(--0045-f-5, #0045f5);
          background: #fff;
          box-shadow: 0px 16px 22.1px 0px rgba(16, 79, 202, 0.04);

          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }
      }

      .pc-group {
        .group-user-list {
          display: none;
        }
      }

      .group-section {
        background: #f7fbff;
      }

      .title_tabs {
        width: 100% !important;

        p {
          text-align: center;
          font-family: "PingFang SC" !important;
          font-size: 13px !important;
        }
      }
    }

    .mobile-group {
      display: none;
    }

    .main-section-mobile {
      display: none;
      width: 100%;
      height: 272px;
      background-image: url("@/assets/images/main_section_mobile_bg.webp");
      background-size: 100%;

      .center-text {
        color: var(--0045-f-5, #0045f5);
        font-family: "Alimama ShuHeiTi";
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 3.84px;
        padding-top: 60px;
      }

      .input-container {
        padding-left: 14px;
        width: 347px;
        height: 46px;
        flex-shrink: 0;
        border-radius: 12px;
        border: 1px solid var(--Linear, #51b2dd);
        background: #fff;
        display: flex;
        align-items: center;
        margin-top: 24px;
      }

      .search_btn {
        margin-top: 24px;
        width: 122px;
        height: 36px;
        flex-shrink: 0;
        border-radius: 10px;
        background: var(--Linear, linear-gradient(106deg, #6499ff 2.15%, #1f6bff 100%));

        span {
          color: #fff;
          text-align: justify;
          font-family: "PingFang SC";
          font-size: 15px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          padding-left: 12px;
        }

        img {
          margin-left: 9.4px;
        }
      }
    }

    .main-section-pc {
      max-width: 1552px;
      width: 80%;
      height: 422px;
      margin: 0 auto;
      border-radius: 20px;
      position: relative;
      //background: linear-gradient(94deg, rgba(130, 217, 255, 0.07) 0%, rgba(78, 201, 255, 0.00) 100%);
      background-image: url("@/assets/images/home_bg.webp");
      background-size: cover;
      background-repeat: no-repeat;

      .input-container {
        input {
          //防止页面方法文字超出
          max-width: 85%;
        }

        max-width: 924px;
        width: 80%;
        overflow: hidden;

        height: 68px;
        flex-shrink: 0;
        border-radius: 14px;
        border: 1px solid var(--Linear, #51b2dd);
        background: #fff;
        margin: 51px auto 0;
        position: relative;

        input {
          width: 924px;
          padding: 24px 0 23px 16px;
        }

        .search_btn {
          width: 105px;
          height: 44px;
          flex-shrink: 0;
          border-radius: 10px;
          background: var(--Linear, linear-gradient(106deg, #6499ff 2.15%, #1f6bff 100%));
          justify-content: center;
          position: absolute;
          right: 12px;
          top: 12px;
          color: #fff;
          font-family: Source Han Sans CN;
          font-weight: 500;
          cursor: pointer;
        }
      }

      .center-text {
        padding-top: 80px;
        text-align: center;
        color: var(--0045-f-5, #0045f5);
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 55.706px;
        /* 139.266% */
        letter-spacing: 6.4px;
      }
    }

    .partners-section {
      background: #f7fbff;

      .partners_item_container {
        margin-top: 41px;
        margin-bottom: 59px;
        padding: 0 110px;
        display: flex;
        justify-content: space-between;

        .partners_item {
          background: #fff;
          box-shadow: 0px 16px 40px 0px rgba(20, 84, 207, 0.08);
          border-radius: 20px;

          display: flex;
          justify-content: center;
          align-items: center;
          max-width: 244px;
          height: 94px;
          flex: 1;
          margin: 0 20px;

          .pc {
            display: block;
          }

          .mobile {
            display: none;
          }
        }
      }
    }

    .group-section {
      margin-top: 36px !important;

      .group-user-list {
        padding: 24px;

        .user-item {
          //display: inline-block;
          width: 200px;
          //height: 420px;
          border-radius: 10px;
          background: #fff;
          box-shadow: 0px 0px 40px 0px rgba(45, 117, 255, 0.12);
          padding: 24px;
          margin: 16px;

          ul {
            padding-top: 24px;
            height: calc(240px - 24px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            li {
              .title {
                span {
                  padding-left: 8px;

                  color: #7b7b7b;
                  font-family: "Source Han Sans CN";
                }
              }

              .desc {
                padding-top: 10px;
                padding-left: 20px;

                color: #000;
                font-family: "Source Han Sans CN";
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 1.5em;
              }
            }
          }

          .user-icon-container {
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
            background: #fff;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0px 0px 40px 0px rgba(45, 117, 255, 0.12);

            img {
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }

          .user-name {
            text-align: center;
            margin-top: 14px;
            color: var(--0045-f-5, #0045f5);
            font-family: "Alimama ShuHeiTi";
            font-size: 14px;
            font-weight: 700;
          }
        }
      }
    }

    .mt-40 {
      margin-top: 40px !important;
    }

    .mt-60 {
      margin-top: 60px !important;
    }

    .mt-72 {
      margin-top: 72px !important;
    }

    .mt-80 {
      margin-top: 80px !important;
    }

    .section-function {
      justify-content: space-between;
    }

    .carousel-container {
      padding: 0 44px;
    }

    .section-item:hover {
      max-width: 360px;
      flex: 1.3;
      border-radius: 20px;
      background: linear-gradient(149deg, #fff -83.75%, #a9c6ff -46.76%, rgba(255, 255, 255, 0.78) 41.16%, rgba(255, 255, 255, 0) 100%);
      box-shadow: 0px 0px 40px 0px rgba(45, 117, 255, 0.12);
      border: none;

      .head-img-hover {
        width: 360px;
        height: 225px;
        margin: 0;
        display: block;
      }

      .head-img-normal {
        display: none;
      }

      .title {
        padding-top: 30px !important;
      }

      .right-operator {
        display: flex;
        justify-content: flex-end;

        img {
          padding-right: 0.5px;
          padding-left: 10px;
        }
      }
    }

    .section-item {
      cursor: pointer;
      border-radius: 20px;
      border: 0.5px solid #6499ff;
      background: #fff;
      box-shadow: 10px 6px 40px 0px rgba(45, 117, 255, 0.04);
      overflow: hidden;
      max-width: 278px;
      margin: 0 20px 43px;
      flex: 1;
      height: 460px;
      transition: all 0.3s;

      .head-img-normal {
        width: 156px;
        height: 156px;
        margin: 40px auto 0;
        display: block;
      }

      .head-img-hover {
        display: none;
      }

      .title {
        padding: 59px 24px 0;
        color: var(--0045-f-5, #0045f5);
        font-family: "Source Han Sans CN";
        font-size: 24px;
        font-weight: 500;
      }

      .desc {
        padding: 0 24px;
        opacity: 0.6;
        color: #1e2025;
        font-family: "Source Han Sans CN";
        font-size: 14px;
        margin: 16px 0 32px 0;
        line-height: 30px;
      }

      .right-operator {
        justify-content: flex-end;
        padding: 0 24px;
        display: none;

        p {
          color: var(--0045-f-5, #0045f5);
          font-family: "Source Han Sans CN";
        }

        img {
          padding-right: 0.5px;
          padding-left: 10px;
        }
      }
    }

    .title_tabs {
      width: 900px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;

      p {
        color: #000;
        font-family: "Source Han Sans CN";
        font-size: 18px;
        font-weight: 500;
        position: relative;
        cursor: pointer;
        padding-bottom: 8px;
      }

      .underline {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        width: 50px;
        height: 2px;
        background: var(--Linear, linear-gradient(106deg, #6499ff 2.15%, #1f6bff 100%));
      }
    }

    .line {
      margin: 0 auto;
      width: 900px;
      height: 1px;
      opacity: 0.2;
      background: #3077ff;
    }

    .arrow {
      width: 36px;
      height: 104px;
      border-radius: 28px;
      background: #FFF;
      box-shadow: 0px 0px 40px 0px rgba(45, 117, 255, 0.12);
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: center;
      cursor: pointer;
      z-index: 1;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .left_arrow {
      left: 0;
    }

    .right_arrow {
      right: 0;
    }


    .solution_container {
      position: relative;
      z-index: -1;

      .solution-arrow-class {
        width: 36px;
        height: 104px;
        border-radius: 28px;
        background: #fff;
        box-shadow: 0px 0px 40px 0px rgba(45, 117, 255, 0.12);
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
      }

      .arrow {
        width: 36px;
        height: 104px;
        border-radius: 28px;
        background: #fff;
        box-shadow: 0px 0px 40px 0px rgba(45, 117, 255, 0.12);
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        cursor: pointer;
      }

      .item_container {
        display: flex;
        justify-content: space-between;
        //width: 100vw;
        width: 100%;

        .item_content {
          //width: 1342px;
          //height: 270px;
          margin-top: 40px;
          display: flex;
          flex: 1;
          justify-content: center;

          .left {
            max-width: 746px;
            flex: 1;
            height: 270px;
            border-radius: 20px;
            background-size: cover;
            background-position: center;
            border: 0.5px solid #6499ff;
            box-shadow: 10px 6px 40px 0px rgba(45, 117, 255, 0.04);
            overflow: hidden;

            img {
              height: 100%;
              width: 100%;
            }
          }

          .item1 {
            background-image: url("@/assets/images/stable_api.webp");
          }

          .item2 {
            background-image: url("@/assets/images/custom_robot.webp");
          }

          .item3 {
            background-image: url("@/assets/images/website_dev.webp");
            background-size: cover;
          }

          .right {
            .title {
              padding: 33px 0 16px 40px;
              color: #1e2025;
              font-family: "Source Han Sans CN";
              font-size: 24px;
              font-weight: 600;
            }

            .desc {
              color: #1e2025;
              text-align: justify;
              font-family: "Source Han Sans CN";
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: 30px;
              width: 556px;
              opacity: 0.7;
              padding-left: 40px;
            }

            .cooperation {
              a {
                color: var(--0045-f-5, #0045f5);
              }

              text-align: left;
              font-family: "Source Han Sans CN";
              font-weight: 500;
              display: flex;
              align-items: center;
              padding-top: 56px;
              padding-left: 32px;

              img {
                padding-left: 11px;
                display: block;
                width: 19.5px;
                height: 16.561px;
              }
            }
          }
        }
      }
    }

    .section {
      max-width: 1600px;
      box-sizing: border-box;
      padding: 0 24px;
      margin: 0 auto;
      overflow: hidden;

      .section-center-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .content {
        height: 300px;
        padding: 20px;
        margin: 0 10vw;

        .box {
          flex: 1;
          height: 50%;
          position: relative;
          justify-content: space-around;
          align-items: flex-start;

          &:first-child {
            margin-right: 20px;
          }

          .title {
            font-size: 50px;
            line-height: 64px;
            font-weight: 500;
            color: #192544;
          }

          .desc {
            line-height: 25px;
            font-size: 16px;
            color: rgba(25, 37, 68, 0.6);
          }

          .btns {
            .btn {
              width: 180px;
              padding: 0;
              color: #fff;
              background-image: linear-gradient(270deg, #165dff, #165dff96);
              border: none;
              line-height: 48px;
              border-radius: 25px;
              text-align: center;
              margin-right: 30px;
              cursor: pointer;
              transition: all 0.3s;
              animation-duration: 2s;

              &:last-child {
                margin-right: 0;
              }

              .start-btn {
                display: inline-block;
                position: relative;
                width: 14px;
                height: 13px;
                margin-right: 8px;

                &::before {
                  content: "";
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  border-top: 2px solid #fff;
                  border-left: 2px solid #fff;
                  box-sizing: border-box;
                  transform: rotate(135deg);
                  position: absolute;
                  left: -2px;
                  top: 50%;
                  margin-top: -4px;
                  transition: all 0.3s;
                }

                &::after {
                  content: "";
                  display: inline-block;
                  width: 6px;
                  height: 2px;
                  background-color: #fff;
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  transition: all 0.3s;
                }
              }

              &:hover {
                background-image: linear-gradient(270deg, #165dff96, #165dffc7);

                .start-btn {
                  &::before {
                    left: 6px;
                    top: 55%;
                  }

                  &::after {
                    right: 1px;
                    width: 7px;
                    bottom: 5px;
                  }
                }
              }
            }

            .btn-default {
              background-image: none;
              border: 1px solid #165dff96;
              color: #165dff96;

              &:hover {
                background-image: linear-gradient(270deg, #165dff1e, #165cff6a);
              }
            }
          }

          .bottom {
            li {
              margin-right: 10px;
            }

            .logo {
              height: 30px;
            }
          }

          .source {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }

        .illustration {
          height: 80%;
        }
      }

      @media screen and (max-width: 750px) {
        .content {
          height: 600px;
          margin: 0;
          flex-direction: column;

          .box {
            &:first-child {
              margin: 0;
              margin-bottom: 20px;
            }

            .title {
              font-size: 30px;
              line-height: 54px;
            }

            .btns {
              .btn {
                width: 150px;
                margin-right: 20px;
                line-height: 43px;

                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }

    // 顶部 home
    .home-board {
      background-image: url("@/assets/images/bg.webp");
      background-repeat: no-repeat;
      background-size: cover;
      // background-position-x: right;

      .content {
        height: calc(100vh + 30px);
        padding: 20px;
        justify-content: center;
        position: relative;

        .box {
          min-height: 600px;
          align-items: center;

          .title {
            font-family: 宋体 思源宋 楷书;
            text-align: center;
            background: linear-gradient(92.06deg, #33c2ff -17.9%, #257cff 43.39%, #165dff 99.4%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 0.7rem;
            // font-weight: 600;
            font-size: 36px;
            text-shadow: 2px 2px 4px linear-gradient(92.06deg, #33c2ff -17.9%, #257cff 43.39%, #165dff 99.4%);
          }

          .mobile {
            display: none;
          }

          .desc {
            font-size: 18px;
            color: #5f5f5f;
            font-family: 微软雅黑，黑体，阿里巴巴惠普体 思源黑;
          }

          .center {
            margin-bottom: 60px;

            .input-group {
              border: #165dff 2px solid;
              border-radius: 10px;
              height: 46px;
              width: 100%;
              min-width: 600px;
              margin-top: 10px;
              overflow: hidden;

              .input {
                flex: 1;
                height: 100%;
                padding: 0 16px;
                width: 20px !important;
                font-size: 16px;
              }

              .btn {
                height: 100%;
                min-width: 108px;
                font-size: 18px;
                border-radius: 0;
              }
            }

            .quote {
              margin-top: 10px;
            }
          }
        }

        .saying {
          position: absolute;
          bottom: 60px;

          .desc {
            color: rgba(25, 37, 68, 0.6);
            font-size: 12px;
          }
        }

        .down-icon {
          position: absolute;
          bottom: 20px;
          color: rgba(25, 37, 68, 0.6);
          font-size: 24px;
          animation: shake 1s ease infinite;
        }

        @keyframes shake {
          0% {
            transform: translateY(-2px);
          }

          50% {
            transform: translateY(3px);
          }

          100% {
            transform: translateY(-2px);
          }
        }
      }

      @media screen and (max-width: 750px) {
        .content {
          padding-top: 30%;

          .box {
            flex: 0;
            width: 100%;
            min-height: 60%;
            justify-content: space-between;

            .title {
              font-size: 26px;
              line-height: 50px;
              letter-spacing: 0.2rem;
              color: #192544;
            }

            // .pc {
            //   display: none;
            // }

            // .mobile {
            //   display: flex;
            // }

            .logo {
              width: 140px;
            }

            .desc {
              font-size: 16px;
            }

            .btns {
              .btn-default {
                display: none;
              }
            }

            .center {
              .input-group {
                width: 100%;
                min-width: auto;
              }
            }
          }
        }
      }
    }

    // 应用
    .application {
      .content {
        margin: 0;
        margin-bottom: 20px;
        padding: 30px 10vw;
        width: 100%;
        height: 350px;

        .box {
          height: 100%;

          .title {
            width: 100%;
            justify-content: space-between;
            line-height: 20px;

            .name {
              font-size: 18px;
            }

            .more {
              background-image: linear-gradient(270deg, #165dff, rgba(22, 93, 255, 0.5882352941));
              padding: 3px 15px;
              color: #fff;
              border-radius: 30px;
              text-align: end;
              font-size: 12px;
              cursor: pointer;
            }
          }

          .desc {
            font-size: 14px;
            margin: 14px 0;
          }

          ul {
            width: calc(100% - 18px);
            flex-wrap: wrap;
            margin-left: 18px;

            li {
              flex: 50%;
              list-style-type: disc;
              padding-top: 8px;
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              word-break: break-word;
              overflow-wrap: break-word;
            }
          }
        }

        &:nth-child(even) {
          background: #fff;

          .box {
            &:first-child {
              order: 2;
              margin: 0;
              margin-left: 20px;
            }
          }
        }
      }

      @media screen and (max-width: 750px) {
        .content {
          height: auto;
          padding-top: 30px;

          .box {
            flex: 0;
            width: 100%;
            min-height: auto;
          }

          &:nth-child(even) {
            background: #fff;

            .box {
              &:first-child {
                order: inherit;
                margin: 0;
                margin-bottom: 20px;
              }
            }
          }

          .illustration {
            height: 400px;
          }
        }
      }
    }

    // 解决方案
    .solution {
      padding: 20px 0;

      .title {
        width: 100%;
        text-align: center;
        font-size: 50px;
        line-height: 64px;
        color: #192544;
        margin: 20px 0;
      }

      .content {
        height: 300px;
        padding: 20px;
        margin-top: 20px;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 0 7px #e6e6e6;

        .box {
          height: 100%;
          align-items: center;

          .title {
            font-size: 24px;
            line-height: 50px;
          }

          .btns {
            margin-top: 20px;
          }
        }

        &:nth-child(even) {
          .box {
            &:first-child {
              order: 2;
              margin: 0;
              margin-left: 20px;
            }
          }
        }

        .illustration {
          height: 100%;
        }
      }

      @media screen and (max-width: 750px) {
        .content {
          height: auto;
          padding-top: 30px;
          border-top: 1px solid aliceblue;

          .box {
            flex: 0;
            width: 100%;
            min-height: auto;
          }

          &:nth-child(even) {
            .box {
              &:first-child {
                order: inherit;
                margin: 0;
                margin-bottom: 20px;
              }
            }
          }

          .illustration {
            height: 400px;
          }
        }
      }
    }

    // 关于我们
    .about {
      padding: 20px 0;

      .content {
        height: 700px;
        width: calc(100% - 20vw);
      }

      .title {
        width: 100%;
        text-align: center;
        font-size: 50px;
        line-height: 64px;
        color: #192544;
        margin: 20px 0;
      }

      @media screen and (max-width: 750px) {
        .content {
          width: 100%;
          height: 260px;
        }
      }
    }

    // 合作伙伴
    .partners {
      .content {
        .box {
          .title {
            margin-bottom: 20px;
          }

          .bottom {
            flex-wrap: wrap;

            li {
              margin-right: 20px;
              margin-bottom: 20px;
              padding: 7px 15px;
              background: white;
              border-radius: 3px;
              box-shadow: 0 0 5px #d4d4d4;
            }
          }
        }
      }

      @media screen and (max-width: 750px) {
        .content {
          height: 300px;

          .box {
            flex: 0;
            width: 100%;
            min-height: 270px;
          }
        }
      }
    }
  }
}
